<template>
  <div class="container sun">
    <div v-if="!isLogin" class="login-tip-bar">
      <div>
        您还未登录，请先登录以体验完整功能！
        <el-button size="small" @click="goLogin">去登录</el-button>
      </div>
    </div>
    <el-container>
      <el-header>
        <div class="top">
          <div class="demo-tabs">
            <div :class="['tab-pane', activeTab == '1' ? 'active' : '']" @click="skippage('/index', '1')">首页</div>
            <div :class="['tab-pane', activeTab == '2' ? 'active' : '']" @click="skippage('/user', '2')">我的</div>
            <div :class="['tab-pane', activeTab == '3' ? 'active' : '']" @click="skippage('/projects', '3')">案例</div>
          </div>
          <div class="option">
            <el-button @click="changeTheme('moon')" circle>
              <el-icon size="20" color="rgb(216.8, 235.6, 255)">
                <Moon />
              </el-icon>
            </el-button>
            <el-button @click="changeTheme('sun')" circle>
              <el-icon size="20" color="rgb(242.5, 208.5, 157.5)">
                <Sunny />
              </el-icon>
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { getDateTime } from '@/util/time.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeTab = ref('1')
const skippage = (url: string, index: string) => {
  activeTab.value = index
  router.push(url)
}
let changeTheme = (theme: string | null) => {
  if (theme === 'sun') {
    document.querySelector('.container')?.classList.remove('moon')
    document.querySelector('.container')?.classList.add('sun')
    document.documentElement.style.setProperty("--theme_bg_color", "#f5f5f5");
    document.documentElement.style.setProperty("--theme_card_color", "#fff");
    document.documentElement.style.setProperty("--theme_font_color", "#1b1b1b");
    document.documentElement.style.setProperty("--theme_button_color", "#0B1926");
    document.documentElement.style.setProperty("--theme_inputbg_color", "#f5f5f5");
  } else {
    document.querySelector('.container')?.classList.remove('sun')
    document.querySelector('.container')?.classList.add('moon')
    document.documentElement.style.setProperty("--theme_bg_color", "#11161A");
    document.documentElement.style.setProperty("--theme_card_color", "#191d21");
    document.documentElement.style.setProperty("--theme_font_color", "#eaf7ff");
    document.documentElement.style.setProperty("--theme_button_color", "#48ccff");
    document.documentElement.style.setProperty("--theme_inputbg_color", "#303437");
  }
};
const isLogin = ref(Boolean(localStorage.getItem('isLogin')))
console.log(isLogin.value)
const goLogin = () => {
  router.push('/login')
}
</script>

<style>
:root {
  --theme_inputbg_color: #f5f5f5;
  --theme_bg_color: #f5f5f5;
  --theme_card_color: #fff;
  --theme_button_color: #0B1926;
  --theme_font_color: #585a5a;
  --theme_buttontext_color: #f5f5f5;
  --theme_font_color: #1b1b1b;
}

ul {
  padding: 0;
}

ul li {
  list-style: none;
}
</style>
<style scoped lang="scss">
@import './css/index.scss'
</style>
